import React, { useState } from 'react';
import { 
  Box, 
  Typography, 
  Paper, 
  Button,
  IconButton,
  Stack,
  Card,
  CardContent,
  Grid,
  TextField
} from '@mui/material';
import { ArrowBack as ArrowBackIcon } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import { open, save, message, ask, confirm } from '@tauri-apps/plugin-dialog';

const FileOperationPage = () => {
  const navigate = useNavigate();
  const [selectedFile, setSelectedFile] = useState('');
  const [savePath, setSavePath] = useState('');

  const handleFileSelect = async () => {
    try {
      const file = await open({
        multiple: false,
        directory: false,
      });
      if (file) {
        setSelectedFile(file);
        await message(`已选择文件: ${file}`, { 
          title: '文件选择', 
          kind: 'info' 
        });
      }
    } catch (error) {
      await message(`选择文件失败: ${error}`, { 
        title: '错误', 
        kind: 'error' 
      });
    }
  };

  const handleFileSave = async () => {
    try {
      const path = await save({
        filters: [
          {
            name: '文本文件',
            extensions: ['txt'],
          },
        ],
      });
      if (path) {
        setSavePath(path);
        await message(`已选择保存路径: ${path}`, { 
          title: '保存文件', 
          kind: 'info' 
        });
      }
    } catch (error) {
      await message(`选择保存路径失败: ${error}`, { 
        title: '错误', 
        kind: 'error' 
      });
    }
  };

  const handleConfirm = async () => {
    const answer = await ask('确定要执行此操作吗？', {
      title: '确认',
      kind: 'warning',
    });
    if (answer) {
      await message('已确认操作', { 
        title: '确认', 
        kind: 'info' 
      });
    }
  };

  const handleCancel = async () => {
    const answer = await confirm('确定要取消此操作吗？', {
      title: '取消',
      kind: 'warning',
    });
    if (answer) {
      await message('已取消操作', { 
        title: '取消', 
        kind: 'info' 
      });
    }
  };

  return (
    <Box sx={{ p: 3 }}>
      <Stack direction="row" alignItems="center" spacing={2} sx={{ mb: 3 }}>
        <IconButton 
          onClick={() => navigate('/')}
          sx={{ color: 'text.primary' }}
        >
          <ArrowBackIcon />
        </IconButton>
        <Typography variant="h4" component="h1">
          文件操作
        </Typography>
      </Stack>

      <Grid container spacing={3}>
        <Grid item xs={12} md={6}>
          <Card>
            <CardContent>
              <Typography variant="h6" gutterBottom>
                文件选择
              </Typography>
              <Stack spacing={2}>
                <Button 
                  variant="contained" 
                  onClick={handleFileSelect}
                >
                  选择文件
                </Button>
                <TextField
                  label="已选文件"
                  value={selectedFile}
                  InputProps={{
                    readOnly: true,
                  }}
                  fullWidth
                />
              </Stack>
            </CardContent>
          </Card>
        </Grid>

        <Grid item xs={12} md={6}>
          <Card>
            <CardContent>
              <Typography variant="h6" gutterBottom>
                文件保存
              </Typography>
              <Stack spacing={2}>
                <Button 
                  variant="contained" 
                  onClick={handleFileSave}
                >
                  选择保存位置
                </Button>
                <TextField
                  label="保存路径"
                  value={savePath}
                  InputProps={{
                    readOnly: true,
                  }}
                  fullWidth
                />
              </Stack>
            </CardContent>
          </Card>
        </Grid>

        <Grid item xs={12} md={6}>
          <Card>
            <CardContent>
              <Typography variant="h6" gutterBottom>
                确认对话框
              </Typography>
              <Stack spacing={2}>
                <Button 
                  variant="contained" 
                  onClick={handleConfirm}
                >
                  确认操作
                </Button>
                <Button 
                  variant="outlined" 
                  onClick={handleCancel}
                >
                  取消操作
                </Button>
              </Stack>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </Box>
  );
};

export default FileOperationPage; 